<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="model/boardModel">

<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('评估信息','评估信息')"></div>
</div>

<div th:fragment="content" th:remove="tag">

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title"><button id="btn-add" type="button" class="btn btn-primary"><i class="fa fa-search"></i>添加检查项</button></h3>
            <span class="pull-right"><code>对评估信息更改过后，请不要忘记保存哦</code></span>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form" th:object="${product}">
            <div class="box-body">
                <h3 class="box-title" th:text="*{productName}" />

                        <table id="chioxTable" class="table table-condensed">
                            <tr>
                                <th>检查项</th>
                                <th>明细</th>
                                <th>自动检测</th>
                                <th>操作</th>
                            </tr>


                        </table>



                <input id="productId" th:name="userId" th:value="*{productId}" hidden="true"/>
            </div>
            <!-- /.box-body -->

            <div class="box-footer">
                <button type="button" class="btn btn-primary pull-left"  onclick="location.href='/esti/info'">返回</button>
                <button id="submit" type="button" class="btn btn-primary pull-right">保存</button>
            </div>
        </form>



        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header" style="background-color: #307095;">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel2">信息-编辑</h4>
                    </div>

                        <div class="panel panel-default" style="margin-top:10px">
                            <div class="panel-heading">
                                <label for="edit-title" class="control-label">检查项</label>
                                <select id="edit-title" name="att_title" class="att_title form-control" placeholder="属性">

                                    <option value="1" >机器型号</option>
                                    <option value="2" >无线功能</option>
                                    <option value="3" >麦克风喇叭</option>
                                    <option value="4" >充电检测</option>
                                    <option value="5" >通话功能</option>
                                    <option value="6" >指纹功能</option>
                                    <option value="7" >距离传感器</option>
                                    <option value="8" >摄像头</option>
                                    <option value="9" >存储容量</option>
                                    <option value="10" >机身颜色</option>
                                    <option value="11" >屏幕外观</option>
                                    <option value="12" >屏幕显示</option>
                                    <option value="13" >屏幕触摸</option>
                                    <option value="14" >是否有维修</option>
                                    <option value="15" >网络制式</option>
                                    <option value="16" >边框背板</option>
                                    <option value="17" >机身是否进水</option>
                                    <option value="19" >账号注销</option>
                                    <option value="20" >购买渠道</option>
                                    <option value="21" >机身弯曲</option>
                                    <option value="22" >按键情况</option>
                                    <!--<option value="23" >指南针功能</option>-->
                                    <option value="24" >保修情况</option>
                                    <option value="25" >内存版本</option>
                                    <!--<option value="26" >已破解ROOT</option>-->
                                    <!--<option value="27" >处理器</option>-->
                                </select>

                                <label for="edit-qst" class="control-label">自动检测</label>

                                <select id="edit-qst" name="qst" class="att_title form-control" >
                                    <option value="0" >否</option>
                                    <option value="1" >是</option>
                                </select>

                                <input id="attId" name="attId" hidden="true"/>
                            </div>
                            <div class="panel-body" id="panel-body">
                                <div class="row">
                                    <input type="hidden" class="form-control choix_code" value="1"/>

                                    <div class="col-xs-4">
                                        <input type="text" class="form-control choix_name" placeholder="属性名" value=""/>
                                    </div>
                                    <div class="col-xs-2">
                                        <input type="text" class="form-control choix_price" placeholder="价格" value="0"/>
                                    </div>
                                    <div class="col-xs-6">
                                        <input type="text" class="form-control choix_desc" placeholder="备注"  value=""/>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <div id="att-status"></div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <button type="button" class="btn btn-info" id="att_add">增加属性</button>
                                    </div>
                                    <div class="col-xs-9">
                                        <button id="submitdata" type="button" class="btn btn-info">完成</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                </div>
            </div>
        </div>


    </div>


    <script th:inline="javascript">

        $(function (){

            //将评估数据进行展示
            /*<![CDATA[*/
            var product = [[${product}]];
            var choice = JSON.parse(product.choice);
            if(choice!=null){
                choice.forEach(function( val, index ) {
                    var front = "<tr id="+index+product.productId+"><td class='hidden'>"+JSON.stringify(val)+"</td><td>"+val.title+"</td><td>";
                    val.choix.forEach(function( val2, index2 ) {
                        front = front+"<span class='label label-info'>"+val2.name+"</span> :<span class='badge badge-success'>减"+val2.price+"</span><br/>";
                    });

                    var qst = "否";
                    if(val.qst==1){qst ="是"}else{"否"};
                    $("#chioxTable").append(front+
                            "</td>"+
                            "<td>"+ qst +"</td>"+
                            "<td><span class='badge bg-red'>编辑</span><span class='badge bg-black'>移除</span>" +
                            "<span class='badge bg-blue'>上移</span><span class='badge bg-green'>下移</span></td>"+
                            "</tr>");
                });
            }


            //加载数据表格按钮单击事件
            bingDataBtns();
            function bingDataBtns() {
                $(".bg-red").unbind('click').on("click",function () {
                    var id =$(this).parent().parent().attr("id");
                    var choiceJson =  $("#"+id).find(".hidden").html();
                    openModifyWin(JSON.parse(choiceJson),id);
                })
                $(".bg-blue").unbind('click').on("click",function () {
                    var id =$(this).parent().parent().attr("id");
                    move_up(id);
                })
                $(".bg-green").unbind('click').on("click",function () {
                    var id =$(this).parent().parent().attr("id");
                    move_down(id);
                })
                $(".bg-black").unbind('click').on("click",function () {
                    var att = $(this).parent().parent();
                    bootbox.confirm(
                            {
                                message: "确认要删除吗",
                                buttons: {
                                    confirm: {
                                        label: '确认'
                                    },
                                    cancel: {
                                        label: '取消'
                                    }
                                },
                                callback: function (result) {
                                    // 返回 true  或者false
                                    if (result) {
                                        att.remove();
                                        toastr.success("已移除该检查项，点击保存按钮后生效");
                                    }
                                }
                            });

                })
            }

            //打开新增检查项窗口
            $("#btn-add").on("click", function (){
                $("#editModal").modal("show");
            });
            //打开修改检查项窗口
            function openModifyWin (json,id){
                $("#attId").val(id);
                $(".att_title").val(json.code);
                $("#edit-qst").val(json.qst);
                var html ="";
                json.choix.forEach(function(e,i) {
                    var code = typeof(e.code)!=='undefined'?e.code:"";
                    var desc = typeof(e.desc)!=='undefined'?e.desc:"";
                    html += '<div class="row"><input type="hidden" class="form-control choix_code" value="'+code+'"><div class="col-xs-4"><input type="text" class="form-control choix_name" placeholder="属性名" value="'+e.name+'"></div><div class="col-xs-2"><input type="text" class="form-control  choix_price" placeholder="价格" value="'+e.price+'"></div><div class="col-xs-6"><input type="text" class="form-control choix_desc" placeholder="备注" value="'+desc+'"></div></div>';

                })
                $('#panel-body').html(html);
                $("#editModal").modal("show");
            };

            //新增属性输入框
            $("#att_add").on("click",function() {
                var x = $('.row');
                if(x.length<20){
                    var str = '<div class="row"><input type="hidden" class="form-control choix_code" value="'+x.length+'"><div class="col-xs-4"><input type="text" class="form-control choix_name" placeholder="属性名" value=""></div><div class="col-xs-2"><input type="text" class="form-control  choix_price" placeholder="价格" value="0"></div><div class="col-xs-6"><input type="text" class="form-control choix_desc" placeholder="备注" value=""></div></div>';
                    $('#panel-body').append(str);
                }
                else{
                    alert('最多允许添加20项');
                }
            });

            //点击完成 添加检查项到数据表哥中
            $("#submitdata").on("click",function(){
                var att_title =  $(".att_title").val();
                if(att_title.trim() == ''){return}
                var res = new Object();
                var att = $("#panel-body").find('.row');
                var temp = [];
                att.each(function(index,element) {
                    var code = index+1;
                    var name = $(".choix_name").eq(index).val().trim();
                    var price = $(".choix_price").eq(index).val().trim();
                    var desc =  $(".choix_desc").eq(index).val().trim();
                    if(name.trim()!='')
                    {
                        var reg1 =  /^\d+$/;
                        var choix = new Object();
                        choix.code= code;
                        choix.name = name;
                        choix.price = price.match(reg1)?price:"0";
                        desc.trim()!=''?choix.desc=desc:"";
                        temp.push(choix);
                    }
                });
                if(temp.length>0)
                {
                    res.title = $("#edit-title").find("option:selected").text();
                    res.code = $(".att_title").val();
                    res.qst = $("#edit-qst").val();
                    res.qstval = $("#edit-qst").find("option:selected").text();
                    res.choix = temp;
                    var attId = $("#attId").val();
                    if(attId==null || attId==""){
                        add_attr(res);
                    }else{
                        modify_attr(res,attId);
                    }

                    $("#editModal").modal("hide");
                }
                else{ toastr.error('至少需要1个选项');}
            });

            //向数据表格中增加一条检查项数据
            function add_attr(val){
                var front = "<tr id="+parseInt(Math.random() * 10000)+"><td class='hidden'>"+JSON.stringify(val)+"</td><td>"+val.title+"</td><td>";
                val.choix.forEach(function( val2, index2 ) {
                    front = front+"<span class='label label-info'>"+val2.name+"</span> :<span class='badge badge-success'>减"+val2.price+"</span><br/>";
                });

                $("#chioxTable").append(front+
                        "</td>"+
                        "<td>"+val.qstval+"</td>"+
                        "<td><span class='badge bg-red'>编辑</span><span class='badge bg-black'>移除</span>"+
                        "<span class='badge bg-blue'>上移</span><span class='badge bg-green'>下移</span></td>"+
                        "</tr>");

                bingDataBtns();
            }
            //修改数据表格中的一条检查项数据
            function modify_attr(res,attId){
                $("#"+attId+" td:eq(0)").html(JSON.stringify(res));
                $("#"+attId+" td:eq(1)").html(res.title);
                var front ="";
                res.choix.forEach(function( val2, index2 ) {
                    front = front+"<span class='label label-info'>"+val2.name+"</span> :<span class='badge badge-success'>减"+val2.price+"</span><br/>";
                });

                $("#"+attId+" td:eq(2)").html(front);
                $("#"+attId+" td:eq(3)").html(res.qstval);


            }

            $("#edit-title").on("change",function () {
                var p1=$(this).children('option:selected').val();
                var cval = "0";
                switch (p1){
                    case "1": cval="1"; break;
                    case "2": cval="1"; break;
                    case "3": cval="1";break;
                    case "4": cval="1";break;
                    case "5": cval="1"; break;
                    case "6": cval="1"; break;
                    case "7": cval="1"; break;
                    case "8": cval="1";break;
                    case "9":cval="1"; break;
                    case "12":cval="1";break;
                    case "13":cval="1";break;
                    case "25":cval="1";break;
                    default : cval="0";

                }
                $("#edit-qst").val(cval)
            });

            //清除弹窗原数据
            $("#editModal").on("hidden.bs.modal", function() {
                //$(this).removeData("bs.modal");
                $("#attId").val("");
                $("#edit-title").val(1);
                $("#edit-qhs").val(0);
                $("#panel-body").html(" <div class='row'><input type='hidden' class='form-control choix_code' value='1'>" +
                        "<div class='col-xs-4'><input type='text' class='form-control choix_name' placeholder='属性名' value=''/></div>"+
                        "<div class='col-xs-2'><input type='text' class='form-control choix_price' placeholder='价格' value='0'/></div>"+
                        "<div class='col-xs-6'><input type='text' class='form-control choix_desc' placeholder='备注'  value=''/></div></div>");
            });

            /*]]>*/



            function move_up(id) {
                var up = $("#"+id).prev("tr");
                up.insertAfter($("#"+id));
            }

            function move_down(id) {
                var up = $("#"+id).next("tr");
                up.insertBefore($("#"+id));
            }


            //保存编辑后的评估数据
            $("#submit").on("click", function () {
                var contents = $('#chioxTable').find('tr');
                if (contents.length > 0) {
                    var temp = [];
                    contents.each(function (index) {
                        var x = $('.hidden').eq(index).html();
                        if(undefined != x){
                            temp.push(JSON.parse(x));//属性数组集合
                        }
                    });
                    $.ajax({
                        url: "/esti/choice/"+$("#productId").val(),
                        type: "POST",
                        dataType: "json",
                        contentType: 'application/json',
                        data: JSON.stringify(temp),
                        success: function (data) {
                            if(data.result == 200){
                                toastr.success(data.msg);
                            }else{
                                toastr.error(data.msg);
                            }
                        }
                    });
                };
            });


        });
    </script>

</div>

</body>
</html>